<template>
  <div class="sourceManage">
    <el-card class="box-card">
      <el-scrollbar wrapClass="scrollbar-wrapper">
        <el-form
          :inline="true"
          class="demo-form-inline"
          size="mini"
          v-model="queryForm"
        >
          <el-row>
            <el-form-item>
              <el-button
                size="small"
                type="primary"
                icon="el-icon-plus"
                @click="showFormEvent()"
                >新增</el-button
              >
              <!-- <el-button size="small" type="primary"  @click="showFormEvent()">刷新</el-button> -->
              <!-- <el-button size="small" type="warning"  @click="showFormEvent()">删除</el-button> -->
            </el-form-item>
          </el-row>
          <el-form-item label="文件服务器名称">
            <el-input
              size="small"
              v-model="queryForm.datasourceName"
              placeholder="文件服务器名称"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="协议类型">
            <el-select
              v-model="queryForm.protocolType"
              clearable
              placeholder="请选择"
            >
              <el-option
                v-for="item in typeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="启用状态">
            <el-select
              v-model="queryForm.status"
              clearable
              placeholder="请选择"
            >
              <el-option
                v-for="item in statusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="创建时间">
            <el-date-picker
              v-model="queryForm.createTime"
              type="date"
              placeholder="选择日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button
              size="small"
              type="primary"
              icon="el-icon-search"
              @click="searchEvent"
              >搜索</el-button
            >
          </el-form-item>
        </el-form>
        <znxd-list
          :column="column"
          :page="page"
          :tableData="tableData"
          @handlePageChange="handlePageChange(page)"
          :pagination="true"
        ></znxd-list>
      </el-scrollbar>
    </el-card>
    <!-- 表单弹出框 -->
    <fileServerDIalog
      :databaseFormVisible="databaseFormVisible"
      :initData="formData"
      @close="fromClose"
    ></fileServerDIalog>
    <!-- 表单弹出框 -->
  </div>
</template>

<script >
import { list, del, update } from "@/api/dataset/fileserver.js"
import { getDiction, formatTime } from "@/utils/config.js"
import fileServerDIalog from "./fileServerDIalog"
export default {
  components: {
    fileServerDIalog
  },
  data () {
    return {
      // 数据库类型字典
      typeOptions: [
        {
          label: "sftp服务器",
          value: "sftp"
        },
        {
          label: "ftp服务器",
          value: "ftp"
        }
      ],
      // 状态字典
      statusOptions: [
        {
          label: "启用",
          value: 1
        },
        {
          label: "禁用",
          value: 2
        }
        // {
        //   label: "删除",
        //   value: 0
        // }
      ],
      page: {
        pageNo: 1, // 当前位于哪页
        pageSize: 10, // 1页显示多少条
        total: 0
      },
      // 搜索条件
      queryForm: {
      },
      tableData: [],
      // 列表配置
      column: [
        {
          align: "center",
          name: "datasourceName",
          label: "文件服务器名称",
          showOverflowTooltip: true
        },
        {
          align: "center",
          name: "protocolType",
          label: "协议类型"
        },
        {
          align: "left",
          name: "ip",
          label: "服务器IP"
          // showOverflowTooltip: true
        },
        {
          align: "left",
          name: "description",
          label: "描述"
        },
        {
          align: "center",
          name: "status",
          label: "启用状态",
          width: 80,
          handleGetName: (code) => {
            return getDiction(this.statusOptions, code)
          }
        },
        {
          align: "center",
          name: "createTime",
          label: "创建时间"
        },
        // {
        //   align: "center",
        //   name: "available",
        //   label: "可用",
        //   width: 80,
        //   handleGetName: (code) => {
        //     let str = "";
        //     switch (code) {
        //       case 1:
        //         str = "可用";
        //         break;
        //       case 0:
        //         str = "不可用";
        //         break;
        //     }
        //     return str;
        //   }
        // },
        {
          align: "center",
          label: "操作",
          width: 240,
          buttons: [
            {
              label: "编辑",
              type: "primary",
              plain: false,
              size: "mini",
              handelClick: (row) => {
                this.showFormEvent(row)
              }
            },
            {
              label: "删除",
              type: "warning",
              plain: false,
              size: "mini",
              handelClick: (row) => {
                this.deleteEvent(row)
              }
            },
            {
              label: "停用",
              handleGetName: (row) => {
                return row.status === 1 ? "停用" : "启用"
              },
              type: "danger",
              handleGetType: (row) => {
                return row.status === 1 ? "danger" : "success"
              },
              plain: true,
              size: "mini",
              handelClick: (row) => {
                this.setEvent(row)
              }
            }
          ]
        }
      ],
      // 表单管理
      databaseFormVisible: false,
      formData: {}
    }
  },
  methods: {
    // 列表操作
    searchEvent () {
      this.page.pageNo = 1
      this.getSourceData()
    },
    getSourceData () {
      let obj = {
        ...this.page,
        ...this.queryForm
      }
      delete obj.total
      if (obj.createTime) {
        obj.createTime = formatTime("yyyy-MM-dd", obj.createTime)
      }
      list(obj).then((res) => {
        console.log(res, 666)
        if (res.data.code === "200") {
          this.tableData = res.data.content
          this.page.total = res.data.total
        } else {
          this.$message({
            message: res.data.msg,
            type: "error"
          })
        }
      })
    },
    handlePageChange (page) {
      this.page = page
      this.getSourceData()
    },
    // form表单弹框操作
    fromClose () {
      this.databaseFormVisible = false
      this.getSourceData()
    },
    showFormEvent (row) {
      this.databaseFormVisible = true
      if (row) {
        this.formData = row
      } else {
        this.formData = {}
      }
    },
    // 二级操作
    deleteEvent (row) {
      this.$confirm("确认删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let obj = {
            id: row.id
          }
          del(obj)
            .then((res) => {
              console.log(res)
              if (res.data.code === 200) {
                console.log(1111)
                this.$message({
                  type: "success",
                  message: res.data.msg || "操作成功"
                })
                this.getSourceData()
              } else {
                console.log(2222)

                this.$message({
                  type: "error",
                  message: res.data.msg
                })
              }
            })
            .catch(() => {
              this.$message({
                type: "error",
                message: "操作失败"
              })
            })
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          })
        })
    },
    setEvent (row) {
      let obj = {
        id: row.id,
        status: row.status === 1 ? 2 : 1
      }
      update(obj)
        .then((res) => {
          let data = res.data
          if (data.code === 200) {
            this.$message({
              type: "success",
              message: data.msg || "操作成功"
            })
            this.getSourceData()
          } else {
            this.$message({
              type: "error",
              message: data.msg
            })
          }
        })
        .catch(() => {
          this.$message({
            type: "error",
            message: "操作失败"
          })
        })
    }
  },
  mounted () {
    this.getSourceData()
  }
};
</script>
<style lang="scss" scoped>
@import "../../../assets/style/style.scss";
@import "../../../assets/style/variable.scss";
</style>
